@charset "utf-8";
.box1 {
    width: 500px;
    height: 500px;
    background-color: #E9F1BD;
    border-width: 1px;
    border-style: solid;
}
.box1 .item1 {
    background-color: #FF0004;
    width: 300px;
    height: 100px;
}
.box1 .item2 {
    background-color: #00B3FF;
    width: 300px;
    height: 100px;
}
.box1 .item3 {
    background-color: #0AFF00;
    width: 300px;
    height: 100px;
}
.box1 div {
    width: 300px;
    height: 100px;
}
.box2 {
    background-color: #A8F4E5;
    width: 500px;
    height: 500px;
    border-width: 1px;
    border-style: solid;
}
.box2 .item1 {
    width: 300px;
    height: 100px;
    background-color: #FF0004;
}
.box2 .item2 {
    background-color: #00FFBB;
    width: 350px;
    height: 150px;
}
.box2 .item3 {
    background-color: #00ABFF;
    width: 400px;
    height: 200px;
}
.box2 .div {
}
.box3 {
    width: 500px;
    height: 500px;
    background-color: #00FFAB;
    border-width: 1px;
    border-style: solid;
}
.box3 .item1 {
    background-color: #60ACBF;
    width: 300px;
    height: 100px;
    margin-bottom: 10px;
}
.box3 .item2 {
    width: 300px;
    height: 100px;
    background-color: #009BFF;
    margin-bottom: 10px;
}
.box3 .item3 {
    width: 300px;
    height: 100px;
    background-color: #266E2C;
    margin-top: 0px;
}
.box3 .div {
}
.box4 {
    width: 500px;
    height: 500px;
    background-color: #00FF6C;
    border-width: 1px;
    border-style: solid;
}
.box4 .item1 {
    height: 100px;
    background-color: #FF0004;
    float: left;
    width: 168px;
}
.box4 .item2 {
    height: 100px;
    background-color: #D9FF2D;
    float: left;
    width: 166px;
}
.box4 .item3 {
    height: 100px;
    background-color: #0093FF;
    float: left;
    width: 166px;
}
